<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script src="js/informationPage.js"></script>

<!-- 
    모든 음식 정보 페이지
 -->
<div id="informationPage">
    <div id="informationPage-head">
        <c:if test="${food == 'A'}">
          <span>음식</span>
        </c:if>
        <c:if test="${food == 'B'}">
          <span>영양식</span>
        </c:if>
        <c:if test="${food == 'C'}">
          <span>간편식</span>
        </c:if>
        <c:if test="${food == 'D'}">
          <span>다이어트식</span>
        </c:if>
        <div id="informationPage-head-caption">
           <div>
                <span>음식종류 :</span> 
                <span style="color: blue;" onclick="foodIngestPurposeSelectList(this.textContent)">한식</span> 
                <span style="color: blue;" onclick="foodIngestPurposeSelectList(this.textContent)">양식</span> 
                <span style="color: blue;" onclick="foodIngestPurposeSelectList(this.textContent)">일식</span> 
                <span style="color: blue;" onclick="foodIngestPurposeSelectList(this.textContent)">중식</span> 
                <span style="color: blue;" onclick="foodIngestPurposeSelectList(this.textContent)">기타</span> 
           </div>
           <div>
                <span>음식분류 :</span> <span>구이</span> <span>국</span> <span>탕</span> 
                <span>면</span> <span>만두</span> <span>볶음 조림</span> <span>전</span> <span>부침</span> 
                <span>밥</span> <span>떡</span> <span>찜</span>
           </div>
        </div>
    </div>
    <div id="informationPage-contents">
    <c:forEach var="foodList" items="${ foodList}">
        <div>
           <div id="informationImage">
           
           </div>  
           <div>
                <div id="informationPage-contents-top">
                    <div>
                        <form>
                            <span style="font-weight: bold; font-size: 20px; padding: 0 0 0 12px; display: inline-block; margin-top: 8px; }">${foodList.foodName }</span>
                        </form>  
                    </div>
                </div> 
                <div>
                    <div class="information-div">
                        <span>칼로리 :</span><span>${foodList.foodCalorie }</span>
                        <span>나트륨 :</span><span>${foodList.foodNatrium }</span>
                        <span>탄수화물 :</span><span>${foodList.foodCarbohydrate}</span>
                        <span>단백질 :</span><span>${foodList.foodProtein}</span>
                    </div>
                    <div class="information-div">
                        <span>지방 :</span> <span>${foodList.foodFat }</span>
                        <span>식이섬유 :</span> <span>${foodList.foodCelluloseFiber }</span>
                        <span>콜레스테롤 :</span> <span>${foodList.foodCholesterol }</span>
                    </div>
                </div> 
           </div>  
           <div>
                <div><span><button style="width: 78px; height: 33px;" onclick="javascript:contentsKeep();">담기</button></span></div>
           </div>  
        </div>
    </c:forEach> 
    </div>
    <div id="informationPage-bottom"></div>
</div>